<template lang="pug">
  div
    s-table(
      ref="table"
      reqUrl="web/course/area_bulid_course_page"
      :column="tableObj.column"
      :filterProps="{fields: tableObj.filterItems}"
      :queryPropsParams="{areaId: curArea.areaId}"
    )
      .table-operator(slot="table-operator")
        el-button.gradientVertical(size="large" round @click="infoHandle()") 新增
      template(slot="beginMonth" slot-scope="text, scope") {{text}} - {{scope.endMonth}}
      template(slot="status" slot-scope="text, scope")
        el-tag(:type="text === 0 ? 'success' : 'danger'" size="mini") {{text === 0 ? '启用' : '禁用'}}
      template(slot="action" slot-scope="text, scope")
        el-link(@click="infoHandle(scope.id, 'view')" type="info") 查看
        el-link(@click="infoHandle(scope.id, 'update')" type="primary") 编辑
        el-popconfirm(
            title="确定删除该课程？"
            @confirm="() => deleteHandle(scope.id)"
            @onConfirm="() => deleteHandle(scope.id)"
          )
            el-link(slot="reference" type="danger") 删除
    add-drawer(:visible.sync="modalObj.visible" :id="modalObj.id" :operateType="modalObj.operateType" @getList="() => refreshTable(true)")
</template>
<script>
import { mapGetters } from 'vuex'
import { dictMixin } from '@/mixins'
import { seachConfig, columnConfig } from './config'
import { del } from './api'
import AddDrawer from './addDrawer'

export default {
  components: {
    AddDrawer
  },
  mixins: [dictMixin],
  data () {
    return {
      tableObj: {
        column: columnConfig,
        filterItems: seachConfig
      },
      modalObj: {
        visible: false,
        id: '',
        operateType: ''
      }
    }
  },
  computed: {
    ...mapGetters(['curArea'])
  },
  created () {},
  methods: {
    refreshTable (flag = false) {
      this.$refs.table.refresh(flag)
    },
    infoHandle (id = '', operateType = 'add') {
      console.log(id)
      this.modalObj = {
        visible: true,
        id,
        operateType
      }
    },
    deleteHandle (courseId) {
      del({ courseId }).then(() => {
        this.$message.success('删除成功')
        this.refreshTable()
      })
    }
  }
}
</script>
